<template>
  <div class="monitor-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
    </Card>
    <Card>
      <p slot="title"></p>
      <starLine
        :config="lineConfig"
        :language="lineLanguage"
        :data="chartData"
      ></starLine>
    </Card>
    <cfg-sheet v-bind="bindConfig" :splitHeight="600"></cfg-sheet>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import mixin from "@/pages/components/mixins/mixin";
import { myRequest } from "public/service/api/myRequest";
export default {
  components: { TableSearch },
  mixins: [mixin],
  props: {
    queryFormItem: {
      default: () => [],
    },
    collapseFormItem: {
      default: () => [],
    },
    type: {
      default: "",
    },
    sourceData: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      filter: {},
      chartData: {},

      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
      lineLanguage: {
        "en-US": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      bindConfig: {
        showTotal: false,
        columns: [
          {
            type: "index",
            width: 70,
            align: "center",
          },
          {
            title: "批次号",
            key: "batchNo",
            minWidth: 100,
          },
          {
            title: "产物批次号",
            key: "productBatchNo",
            minWidth: 120,
          },
          // {
          //   title: "类型",
          //   key: "type",
          //   minWidth: 120,
          // },
          // {
          //   title: "类型名称",
          //   key: "typeName",
          //   minWidth: 120,
          // },
          {
            title: "工艺",
            key: "technology",
            minWidth: 120,
          },
          // {
          //   title: "规格",
          //   key: "materialNo",
          //   minWidth: 120,
          // },
          {
            title: "设备",
            key: "equName",
            minWidth: 120,
          },
          {
            title: "产量",
            key: "quantity",
            minWidth: 120,
          },
          {
            title: "单位",
            key: "unit",
            minWidth: 120,
          },
          {
            title: "单价",
            key: "unitPrice",
            minWidth: 120,
          },
          // {
          //   title: "折算率",
          //   key: "convertRatio",
          //   minWidth: 120,
          // },
          // {
          //   title: "折算用量",
          //   key: "actualQuantity",
          //   minWidth: 120,
          // },
          // {
          //   title: "成本",
          //   key: "cost",
          //   minWidth: 120,
          // },
          // {
          //   title: "折算成本",
          //   key: "actualCost",
          //   minWidth: 120,
          // },
          {
            title: "开始时间",
            key: "startTime",
            minWidth: 120,
          },
          {
            title: "结束时间",
            key: "endTime",
            minWidth: 120,
          },
          // {
          //   title: "创建时间",
          //   key: "createTime",
          //   minWidth: 120,
          // },
          // {
          //   title: "更新时间",
          //   key: "updateTime",
          //   minWidth: 120,
          // },
        ],
        data: [
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
        ],
      },
      labelWidth: 120,
    };
  },
  computed: {
    lang() {
      return {
        "en-US": {
          cancel: "cancel",
          confirmDelete: "confirm delete?",
        },
        "zh-CN": {
          cancel: "取消",
          confirmDelete: "确认删除？",
        },
      }[this.G_Locale];
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    let dom = document.querySelector(".ivu-table-body");
    console.log(
      dom.addEventListener,
      dom.scrollHeight,
      dom.scrollTop,
      dom.clientHeight
    );
    const that = this;
    dom.addEventListener("scroll", function () {
      // scrollDistance 为零时滚动到底部
      const scrollDistance =
        dom.scrollHeight - dom.scrollTop - dom.clientHeight;
      console.log(
        scrollDistance,
        "------",
        dom.scrollHeight,
        dom.scrollTop,
        dom.clientHeight
      );
      if (scrollDistance <= 0) {
        // 等于0证明已经到底，可以请求接口
        if (that.bindConfig.data.length > 30) return;
        that.bindConfig.data.push(
          ...[
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
            { sf_energyName: "5" },
          ]
        );
      }
    });
  },
  methods: {
    getList() {
      myRequest({
        url: "/star4.0/quantityStatistics/queryLineStatistics",
        method: "post",
        data: { ...this.sourceData },
      }).then((res) => {
        let { categories, values } = res;
        this.$set(this, "chartData", {
          categories,
          values: this.transValues(values),
        });
        this.$set(this.bindConfig, "data", res.dataList || []);
      });
    },
    handleSearch(data) {
      console.log(data);
      this.filter = data;
      let { equId, timeRange } = this.filter;
      if (!equId || !timeRange) {
        this.$Message.error("请选择设备和时间区间");
        return;
      }
      if (!!timeRange && Array.isArray(timeRange)) {
        this.filter.startTime = timeRange[0];
        this.filter.endTime = timeRange[1];
      }
      this.sourceData = Object.assign(this.sourceData, this.filter);
      this.getList();
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.monitor-page {
  padding-top: 10px;
}
.search-banner {
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
  p {
    text-align: center;
  }
}
::v-deep .ivu-card-head {
  padding: 5px 16px;
  border: none;
}
</style>
